﻿@{
    ViewBag.Title = "Chi tiết sản phẩm";
    Biz.Product product = ViewBag.Product;
}

@helper GetImage(Biz.Product p)
{
    if (p.Images.Count > 0)
    {
        @p.Images[0].Image;
    }
}

@section scripts {
    <script src="/Scripts/tabs.js"></script>


    <script type="text/javascript">
        jQuery(function () {
            jQuery('div.G4').galleryScroll({
                slideNum: 'div.s2',
                autoSlide: 3000
            });
        });
    </script>
}

<div class="main-holder">
    <div class="main-frame">
        <div id="content">
			<!-- content -->
			<div class="content">
				<div class="box">
					<h2>@product.Name</h2>
                    @if (product.IsFeatured) { 
					    <span class="top-new big-top">top</span>
                    }
					<div class="holder">
						<div class="frame-box">
							<div class="container">
								<!-- description -->
								<div class="description-box">
									<h3>@product.Name</h3>
									<div class="info-panel">
										<span class="price">@product.CurrentPrice VNĐ</span>
										<form class="form" action="#">
											@*<label for="qty">Số lượng:</label>
											<input type="text" class="text middle" value="1" />*@
											<button class="more add-more">Thêm vào giỏ</button>
										</form>
									</div>
									<div class="text-holder">
										<p>@product.ShortDescription</p>
                                        <!--ul>
                                            <li>Tính năng nổi bật số 1</li>
                                            <li class="colored">Đây là tính năng nổi bật thứ 2</li>
                                            <li>Tính năng nổi bật thứ 3</li>
                                            <li class="colored">Và thêm tính năng thứ 4</li>
                                            <li>Thứ 5</li>
                                            <li class="colored">Cuối cùng</li>
                                        </ul -->
									</div>
								</div>
								<!-- carousel -->
								<div class="carousel">
												
									<div id="gallery">
									<div id="panel">
                                        <img id="largeImage" src="/Images/Products/@GetImage(product)" width="320" height="332" />
									</div>
											
									<div id="thumbs">
                                        @helper ListImage(Biz.Product p) { 
                                            foreach (var x in p.Images)
                                            {
                                                <img src="/Images/Products/@x.Image" />
                                            }
                                        }

                                        <!-- img src="/Images/Products/product_thumb.jpg" alt="1st image description" />
                                        <img src="/Images/Products/product_thumb.jpg" alt="2nd image description" />
                                        <img src="/Images/Products/product_thumb.jpg" alt="3rd image description" />
                                        <img src="/Images/Products/product_thumb.jpg" alt="4th image description" />
										<span class="top-arrow">$nbsp;</span>
										<span class="bottom-arrow">$nbsp;</span -->
									</div>
								</div>
									<script>
										$('#thumbs').delegate('img', 'click', function () {
											$('#largeImage').attr('src', $(this).attr('src').replace('thumb', 'large'));
											$('#description').html($(this).attr('alt'));
										});

									</script>
								</div>
											
							</div>
							<div class="blocks-holder subblocks">
								<!-- tabs -->
								<div class="tabs-area">
									<ul class="tabset">
										<li><a href="#tab-1" class="tab">Chi tiết</a></li>
										<li><a href="#tab-2" class="tab  active">Bình luận</a></li>
									</ul>
									<div class="tab-content" id="tab-1">
                                        @foreach (var s in product.Description.Split('\n')) { 
										    <p>@s</p>
                                        }
										<h3>Tính năng</h3>
										<ul class="features-list">
                                            @helper ListFeatured(Biz.Product p) { 
                                                for (int i = 0; i < p.Properties.Count; ++i)
                                                {
                                                    string col = ((i+1) % 2 == 0)? "class=\"colored\"":"";
                                                    
                                                    <li @col>@p.Properties[i].Property: <i>@p.Properties[i].Value</i></li>
                                                }
                                            }
                                            @ListFeatured(product)
                                            <!-- li class="colored">Bộ xử lí: <i>Qualcomm® MSM 7201A™ 528 MHz</i></!li>
											<li>Hệ điều hành: <i>Windows Mobile® 8</i></li>
											<li class="colored">3.8-inch TFT-LCD flat touch-sensitive screen with 480 x 800 WVGA resolution</li>
											<li>HSDPA/WCDMA: Europe/Asia: 900/2100 MHz; Up to 2 Mbps up-link and 7.2 Mbps down-link speeds</li>
											<li class="colored">Quad-band GSM/GPRS/EDGE: Europe/Asia: 850/900/1800/1900 MHz (Band frequency, HSUPA availability, and data speed are operator dependent.)</li>
											<li>Device Control via HTC TouchFLO™ 3D & Touch-sensitive front panel buttons</li>
											<li class="colored">GPS and A-GPS ready</li>
											<li>Bluetooth® 2.0 with Enhanced Data Rate and A2DP for wireless stereo headsets</li>
											<li class="colored">Wi-Fi®: IEEE 802.11 b/g</li>
											<li>HTC ExtUSB™ (11-pin mini-USB 2.0)</li>
											<li class="colored">5 megapixel color camera with auto focus</li>
											<li>VGA CMOS color camera</li>
											<li class="colored">Built-in 3.5 mm audio jack, microphone, speaker, and FM radio</li>
											<li>Ring tone formats: AAC, AAC+, eAAC+, AMR-NB, AMR-WB, QCP, MP3, WMA, WAV</li>
											<li>40 polyphonic and standard MIDI format 0 and 1 (SMF)/SP MIDI</li>
											<li class="colored">Rechargeable Lithium-ion or Lithium-ion polymer 1350 mAh battery</li>
											<li>Expansion Slot: microSD™ memory card (SD 2.0 compatible)</li>
											<li class="colored">AC Adapter Voltage range/frequency: 100 ~ 240V AC, 50/60 Hz DC output: 5V and 1A <br />Special Features: FM Radio, G-Sensor</li -->
										</ul>
									</div>
									<div class="tab-content" id="tab-2">
                                        @foreach (var c in ViewBag.Comments) { 
										    <div class="comments-block">
											    <div class="heading">
												    <div class="alignright">
													    <time>@c.Time</time>
													    <span class="plus">+</span>
													    <span class="minus">-</span>
												    </div>
												    <div class="alignleft">
													    <h3 class="author">@c.Author</h3>
												    </div>
											    </div>
                                                    <p>@foreach (var s in c.Content.Split('\n')) { 
												        @s<br/>
                                                    }</p>
											    <footer>
												    <a href="#">báo cáo xấu</a>
												    <!--a href="#">reply</a -->
											    </footer>
										    </div>
                                        }
										
										<!-- comments-form -->
										<div class="form-holder">
											<div class="form-frame">
												<form class="form" action="#">
													<fieldset>
														<h3>Viết bình luận cho sản phẩm</h3>
															<input type="text" class="text large" value="Tên của bạn" />
															<textarea class="textarea" name="" id="" cols="30" rows="10">Bình luận về sản phẩm</textarea>
															<div class="info-box">
																<button class="more">Gửi</button>
															</div>
													</fieldset>
												</form>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<!-- aside -->
			<aside id="sidebar">
				@Html.Action("__CategoriesMenu","Product")
			</aside>
		</div>
    </div>
</div>